﻿<script setup>

</script>

<!--  首页  http://localhost:9090/index-->
<template>
  <!--  1.烘焙首页轮播图  -->
  <!--  为了让el-row缩放的时候宽度不变(只改变高度)。就将el-row放到一个div中并设置div居中  -->
  <div style="width: 1200px; margin:0 auto">
    <el-carousel height="350px">
      <el-carousel-item v-for="b in bannerArr">
        <img :src="b.imgUrl" width="100%" alt="banner"/>
      </el-carousel-item>
    </el-carousel>

    <!--  2.烘焙食谱导航条  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin:15px">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item index="1">面包</el-menu-item>
          <el-menu-item index="2">小食</el-menu-item>
          <el-menu-item index="3">家常菜</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <!--  食谱列表  -->
    <el-row :gutter="20"><!--  style="margin: 10px  0"是用来控制每一列上下外边距为10px，左右为0(左右在其他地方还设置了外边距所以左右外边距不会是0)  -->
      <el-col :span="6" v-for="item in recipeArr" :key="item.id" style="margin: 10px  0">
        <el-card>
          <a href="javascript:void(0)" @click="detail(item.id)" style="text-decoration: none;color: black">
            <img :src="item.imgUrl" width="100%" height="145" alt="img"/>
            <p style="height: 40px;text-align: left">{{item.title}}</p>
            <el-row>
              <el-col :span="4">
                <el-avatar :src="item.userImgUrl" size="small"></el-avatar>
              </el-col>
              <el-col :span="10">{{item.nickName}}</el-col>
              <el-col :span="10">
                <!--  因为要将类型浮动显示到右侧，所以包含在一个span中  -->
                <span style="float: right">{{item.categoryName}}</span>
              </el-col>
            </el-row>
          </a>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button>点击加载更多</el-button>
    </div>


    <hr/>
    <!--  2.烘焙视频导航条  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin:15px">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item index="1">面包教学</el-menu-item>
          <el-menu-item index="2">零食鉴赏</el-menu-item>
          <el-menu-item index="3">家常菜教程</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  烘焙视频列表  -->
    <el-row gutter="20">
      <el-col :span="6" v-for="item in recipeArr" :key="item.id" style="margin: 10px  0">
        <el-card>
          <a href="javascript:void(0)" @click="detail(item.id)"  style="text-decoration: none;color: black">
            <img :src="item.imgUrl" width="100%" height="145"/>
            <!--<img :src="BASE_URL+item.imgUrl" width="100%" height="145"/>-->
            <p style="height:40px">{{item.title}}</p>
          </a>
          <el-row>
            <el-col :span="4">
              <!--<el-avatar :src="BASE_URL+item.userImgUrl" size="small"/>-->
              <el-avatar :src="item.userImgUrl" size="small"/>
            </el-col>
            <el-col :span="10">{{item.nickName}}</el-col>
            <el-col :span="10" style="float: right">{{item.categoryName}}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button>点击加载更多</el-button>
    </div>



    <hr/>
    <!--  2.行业资讯导航条  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin:15px">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item index="1">美食资讯</el-menu-item>
          <el-menu-item index="2">店家资讯</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  行业资讯列表  -->
    <el-row gutter="20">
      <el-col :span="6" v-for="item in recipeArr" :key="item.id" style="margin: 10px  0">
        <el-card>
          <a href="javascript:void(0)" @click="detail(item.id)"  style="text-decoration: none;color: black">
            <img :src="item.imgUrl" width="100%" height="145"/>
            <!--<img :src="BASE_URL+item.imgUrl" width="100%" height="145"/>-->
            <p style="height:40px">{{item.title}}</p>
          </a>
          <el-row>
            <el-col :span="4">
              <!--<el-avatar :src="BASE_URL+item.userImgUrl" size="small"/>-->
              <el-avatar :src="item.userImgUrl" size="small"/>
            </el-col>
            <el-col :span="10">{{item.nickName}}</el-col>
            <el-col :span="10" style="float: right">{{item.categoryName}}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button>点击加载更多</el-button>
    </div>


  </div>


</template>


<script>
  export default {
    name: "IndexView",
    data(){
      return {
        bannerArr: [],
        recipeArr: [
            {
              id: 13,
              title: "家常面包",
              imgUrl: "/imgs/a.jpg",
              categoryName: "面包",
              nickName: "汤姆",
              userImgUrl: "imgs/head.jpg"
            },
            {
              id: 14,
              title: "爆浆抹茶甜甜圈面板，自带幸福感的小甜甜",
              imgUrl: "/imgs/b.jpg",
              categoryName: "家常菜",
              nickName: "汤姆",
              userImgUrl: "imgs/head.jpg"
            },
            {
              id: 15,
              title: "开心火龙果椰蓉面包任谁都抵挡不了",
              imgUrl: "/imgs/c.jpg",
              categoryName: "小食",
              nickName: "汤姆",
              userImgUrl: "imgs/head.jpg"
            },
            {
              id: 16,
              title: "蔓越莓绿豆蛋糕，味道还不错，值得一试",
              imgUrl: "/imgs/d.jpg",
              categoryName: "面包",
              nickName: "汤姆",
              userImgUrl: "imgs/head.jpg"
            }
        ]
      }
    },
    mounted(){// BASE_URL代表src/http的baseUrl.js中的 const BaseUrl='http://localhost:8088'
      this.axios.get(this.BASE_URL+'/banners').then( (response)=>{
        if(response.data.code===1){//从后端请求轮播图成功就将请求成功的数据赋值给bannerArr数组
          this.bannerArr=response.data.data;
        }
      });
    },
    methods:{
      detail(id){
        //this.$router.push({path: '/recipeDetail', query: {id: id}})
      }
    }
  }
</script>
<style scoped>

</style>